<template>
  <!-- 登录页面的根容器 -->
  <div class="login">
    <!-- 左侧图片展示区域 -->
    <div class="imgBox">
      <!-- 背景图片 -->
      <img class="img" src="@/assets/imgs/login/bg.png" alt="" />
    </div>
    <!-- 右侧登录表单区域 -->
    <div class="box">
      <!-- 标题 -->
      <div class="header">ZZ Admin</div>
      <!-- 表单容器 -->
      <div class="form">
        <!-- 用户名输入行 -->
        <div class="cell">
          <div class="label">用户名</div>
          <div class="content">
            <!-- Element Plus 输入框，双向绑定 formData.account -->
            <el-input v-model="formData.account" placeholder="请输入用户名" />
          </div>
        </div>
        <!-- 密码输入行 -->
        <div class="cell">
          <div class="label">密码</div>
          <div class="content">
            <!-- Element Plus 密码输入框，双向绑定 formData.password，并显示密码切换按钮 -->
            <el-input
              v-model="formData.password"
              type="password"
              placeholder="请输入密码"
              :show-password="true"
            />
          </div>
        </div>
        <!-- 隐私条例勾选区域 -->
        <div class="note">
          <!-- Element Plus 复选框，双向绑定 isChecked 状态 -->
          <el-checkbox v-model="isChecked" />
          已阅读
          <!-- 《隐私条例》文本，点击可触发事件（当前未实现具体事件） -->
          <span style="color: var(--el-color-primary); cursor: pointer"
            >《隐私条例》</span
          >
        </div>
        <!-- 登录按钮，点击触发 login 方法 -->
        <div class="loginBtn" @click="login">登录</div>
        <!-- 注册按钮（当前仅为占位，未实现功能） -->
        <div class="signBtn">去注册</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 导入 Pinia store hook
import useStore from "@/store";
// 从 vue 中导入 reactive 和 ref 用于创建响应式数据
import { reactive, ref } from "vue";
// 从 vue-router 中导入 useRouter 用于路由导航
import { useRouter } from "vue-router";
// 导入登录 API 函数
import { loginApi } from "@/api/user.ts";
// 从 Element Plus 中导入 ElMessage 用于显示消息提示
import { ElMessage } from "element-plus";

// 定义一个响应式变量，用于跟踪《隐私条例》勾选框的状态，默认为 false (未勾选)
const isChecked = ref(false);
// 获取 Pinia store 实例
const store = useStore();
// 获取 Vue Router 实例
const router = useRouter();
// 免登录权限标志，true 表示开启免登录，false 表示需要正常登录
// const frerdl = false; // 正常登录流程
const frerdl = true; // 开启免登录，用于开发调试

// 定义响应式表单数据对象
const formData = reactive({
  account: "admin", // 默认用户名
  password: "123456", // 默认密码
});

// 登录函数
function login() {
  // 如果开启了免登录权限
  if (frerdl) {
    // 显示成功消息
    ElMessage.success("权限免登录");
    // 在 store 中设置用户信息
    store.setStorageState("userInfo", {
      name: "ZZ", // 用户名
    });
    // 恢复或应用当前的主题设置（暗黑/明亮）
    store.changeTheme(store.isDarkTheme);
    // 跳转到首页
    router.push("/");
    // 结束函数执行
    return;
  }

  // 如果未勾选《隐私条例》或未输入账号或密码
  if (!formData.account || !formData.password || !isChecked.value) {
    let errorMessage = ""; // 初始化错误消息
    // 如果账号或密码为空
    if (!formData.account || !formData.password) {
      errorMessage = "请输入账号和密码";
    } else if (!isChecked.value) {
      // 如果未勾选《隐私条例》
      errorMessage = "请阅读并勾选《隐私条例》";
    }
    // 显示错误消息
    ElMessage.error(errorMessage);
    // 结束函数执行
    return;
  }

  // 调用登录 API
  loginApi(formData).then((res) => {
    // 登录成功后，在 store 中设置用户信息
    store.setStorageState("userInfo", {
      name: "ZZ", // 用户名
    });
    // 恢复或应用当前的主题设置（避免黑暗主题在登录后未立即生效的问题）
    store.changeTheme(store.isDarkTheme);
    // 跳转到首页
    router.push("/");
  });
}
// 防止从暗黑主题退出登录后，登录页面的 HTML 根元素残留 'dark' 类导致样式错误
// 在组件加载时立即移除 'dark' 类
document.documentElement.classList.remove("dark");
</script>

<style lang="scss" scoped>
// 登录页面的根样式
.login {
  // 定义 Element Plus 主题色变量，确保组件颜色一致性
  --el-color-primary: #409eff !important;
  // 高度占满视窗
  height: 100vh;
  // 使用 flex 布局
  display: flex;
  // 垂直居中对齐子元素
  align-items: center;
  // 内边距，使用视窗宽度的10%
  padding: 10vw;
  //盒模型设置为 border-box，padding 和 border 不会增加元素的实际宽高
  box-sizing: border-box;

  // 左侧图片容器样式
  .imgBox {
    // flex 占据剩余空间比例为 2
    flex: 2;
    // 高度占满父容器
    height: 100%;
    // 使用 flex 布局
    display: flex;
    // 水平居中
    justify-content: center;
    // 垂直居中
    align-items: center;

    // 图片样式
    .img {
      width: 800px;
      height: 400px;
    }
  }

  // 右侧表单盒子样式
  .box {
    // 不伸缩，保持固定宽度
    flex-shrink: 0;
    width: 400px;
    // height: 800px; // 注释掉的高度，根据内容自适应
    border-radius: 16px;
    // 阴影效果
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    // 内边距
    padding: 32px;
    // 盒模型设置为 border-box
    box-sizing: border-box;

    // 头部标题样式
    .header {
      // 颜色使用主题色
      color: var(--el-color-primary);
      // 文本居中
      text-align: center;
      font-size: 32px;
      font-weight: bold;
    }

    // 表单区域样式
    .form {
      // 上外边距
      margin-top: 40px;
      // 使用 flex 布局，垂直排列
      display: flex;
      flex-direction: column;
      // 子元素间距
      gap: 20px;

      // 表单单元格（如用户名行、密码行）样式
      .cell {
        // 使用 flex 布局，垂直排列
        display: flex;
        flex-direction: column;
        // 子元素间距
        gap: 8px;

        // 深度选择器，修改 Element Plus 输入框内部包装元素的样式
        :deep(.el-input__wrapper) {
          // 背景透明
          background: transparent;
        }

        // 深度选择器，修改 Element Plus 输入框聚焦时的样式
        :deep(.is-focus) {
          // 边框使用主题色
          box-shadow: 0 0 0 1px var(--el-color-primary);
        }
      }

      // 隐私条例提示区域样式
      .note {
        font-size: 14px;
        // 使用 flex 布局
        display: flex;
        // 垂直居中
        align-items: center;
        // 水平居中
        justify-content: center;
      }

      // 登录按钮样式
      .loginBtn {
        // 背景色使用主题色
        background-color: var(--el-color-primary);
        color: #fff;
        padding: 10px;
        text-align: center;
        border-radius: 4px;
        // 鼠标指针变为手型
        cursor: pointer;

        // 鼠标悬停效果
        &:hover {
          // 背景色变浅
          background-color: rgba(64, 158, 255, 0.8);
        }
      }

      // 注册按钮样式
      .signBtn {
        // 宽度根据内容自适应
        width: fit-content;
        // 颜色使用主题色
        color: var(--el-color-primary);
        // 鼠标指针变为手型
        cursor: pointer;
      }
    }
  }
}
</style>
